/**
 * 绑定滑块与输入框，实现双向同步功能
 * 此函数会将温度、最大令牌数、语音速度和语音音量对应的滑块与输入框进行绑定
 */
function bindSlider() {
    /**
     * 绑定单个滑块与输入框，实现双向同步
     *
     * @param {HTMLElement} slider - 滑块元素
     *
     * @param {HTMLElement} input - 输入框元素
     */
    function event(slider, input) {
        // 当滑块值改变时，将滑块的值同步到输入框
        slider.addEventListener('input', function () { input.value = this.value; });
        // 当输入框值改变时，将输入框的值同步到滑块
        input.addEventListener('input', function () { slider.value = this.value; });
    };
    // 绑定最大令牌数滑块与输入框
    event(messageSliceLengthSlider, messageSliceLength);
    // 绑定语音速度滑块与输入框
    event(speechSpeedSlider, speechSpeedValue);
    // 绑定语音音量滑块与输入框
    event(speechVolumeSlider, speechVolumeValue);
};

/**
 * 初始化所有带有 auto-resize-textarea 类的文本框的自动调整高度功能
 */
function initAutoResizeTextareas() {
    /**
     * 获取所有带有 auto-resize-textarea 类的文本框元素
     */
    const textareas = document.querySelectorAll('.auto-resize-textarea');
    // 遍历每个文本框元素，为其添加自动调整高度的功能
    textareas.forEach(
        textarea => {
            /**
             * 自动调整文本框高度的函数
             * 先将文本框高度设为 auto 以获取实际内容高度，
             * 再取内容高度和最大高度中的较小值作为新高度
             */
            function autoResize() {
                // 临时将文本框高度设为 auto，以便获取准确的 scrollHeight
                textarea.style.height = 'auto';
                /**
                 * 计算新高度，取文本框内容高度和最大高度中的较小值
                 */
                const newHeight = Math.min(textarea.scrollHeight, parseInt(getComputedStyle(textarea).maxHeight));
                // 设置文本框的新高度
                textarea.style.height = newHeight + 'px';
            }
            // 为文本框的 input 事件添加自动调整高度的监听
            textarea.addEventListener('input', autoResize);
            // 为文本框的 focus 事件添加自动调整高度的监听
            textarea.addEventListener('focus', autoResize);
            // 初始化时立即执行一次自动调整高度
            autoResize();
        }
    );
};